<template>
  <div>
    <div>
      <el-row>
        <el-col :span="4" :offset="1">
          <div style="height: 300px" class="box">
            <h3 style="text-align: center">推荐购买</h3>
            <el-scrollbar style="height: 100%;">
              <ul style="overflow: auto">
                <li v-for="(item,index) in recommends" :key="index"
                    style="list-style: none; height: 60px" @click="toInfo(item.id)">
                  <el-row>
                    <el-col :span="7">
                      <el-image :src="item.pic" style="width: 50px; height: 50px"></el-image>
                    </el-col>
                    <el-col :span="12">{{item.name}}</el-col>
                    <el-col :span="4" style="color: #F40; font-weight: 700">￥{{item.price}}</el-col>
                  </el-row>
                </li>
              </ul>
            </el-scrollbar>
          </div>
        </el-col>
        <el-col :span="14">
          <el-carousel height="300px" style="margin: 50px 4%">
            <el-carousel-item v-for="(item,index) in banners" :key="index">
              <img style="width: 100%;
                    height: 100%;
                    background-size: cover;
                    " :src="item"/>
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="4">
          <div style="height: 300px" class="box">
            <h3 style="text-align: center">当月热销</h3>
            <el-scrollbar style="height: 100%;">
              <ul style="overflow: auto">
                <li v-for="(item,index) in hots" :key="index"
                    style="list-style: none; height: 60px" @click="toInfo(item.id)">
                  <el-row>
                    <el-col :span="7">
                      <el-image :src="item.pic" style="width: 50px; height: 50px"></el-image>
                    </el-col>
                    <el-col :span="12">{{item.name}}</el-col>
                    <el-col :span="4" style="color: #F40; font-weight: 700">￥{{item.price}}</el-col>
                  </el-row>
                </li>
              </ul>
            </el-scrollbar>
          </div>
        </el-col>
      </el-row>

      <el-divider></el-divider>

      <el-row>
          <el-col :span="20" :offset="2">
            <el-row :gutter="20">
              <el-col :span="4" v-for="(item,index) in products" :key="index">
                <div class="grid-content" style="margin-bottom:10px" @click="toInfo(item.id)">
                  <el-card :body-style="{ padding: '0px',margin: '10px' }">
                    <img :src="item.pic" class="image">
                    <div style="padding: 14px;">
                      <div>{{item.name}}</div>
                      <div style="color: #F40; font-weight: 700">￥{{item.price}}</div>
                    </div>
                  </el-card>
                </div>

              </el-col>
            </el-row>
          </el-col>
          <!--<p v-if="loading" style="margin-left: 50%" class="el-icon-loading"></p>
          <p v-if="this.data.cur === -1 && this.commodityList.length > 0" style="margin: 0 auto; width: 80px">没有更多了</p>-->
        <!-- </div> -->
      </el-row>
    </div>
  </div>
</template>

<script>
import { getContent } from '@/api/home'

export default {
  name: "index",
  data() {
    return {
      recommends: [
        
      ],
      hots: [

      ],
      banners: [
        'https://chonor-oss.oss-cn-shenzhen.aliyuncs.com/2021/03/03/fbb50aaa202c4ed3a7a6c4b6555eff63file',
        'https://chonor-oss.oss-cn-shenzhen.aliyuncs.com/2021/03/03/250ad5d6f1a643138c15b4efb05f597afile',
        'https://chonor-oss.oss-cn-shenzhen.aliyuncs.com/2021/03/03/e41a9a2afc604b7faf047b19ac8504d9file',
        'https://chonor-oss.oss-cn-shenzhen.aliyuncs.com/2021/03/03/e7e9e2b451254f98a3cc81dc89fd3416file',
      ],
      products: [

      ]
    }
  },
  created() {
    // Mock: get all routes and roles list from server
    this.getContent()
  },
  methods: {
  async getContent() {
    const res = await getContent()
    console.log("getContent",res)
    
    const { recommendProductList, hotProductList, productList } = res.data
    this.recommends = recommendProductList
    this.hots = hotProductList
    this.products = productList
  },
    toInfo(id) {
      console.log("id",id)
      this.$router.push({path: '/product', query: {id: id}})
    }
  }
}
</script>

<style>
  /* .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  } */

  .grid-content .image {
    width: 100%;
    height: 180px;
    display: block;
  }

  /* .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  } */
  
  .box li {
    cursor: pointer;
  }

  .box .el-scrollbar__wrap {
    overflow-x: hidden;
  }


  /* .boxs {
    padding: 20px 10px;
    display: inline-block;
  } */

  /* .boxs ul {
    overflow: hidden;
    width: 1200px;
    margin-bottom: -10px;
    margin-top: 0;
  }

  .boxs li {
    list-style: none;
    float: left;
    width: 25%; /*可以用百分比*/
    /* height: 25%; /*可以用百分比*/
    /* margin-bottom: 10px;
    cursor: pointer;
  } */ 

  /* .boxs li > div {
    border-radius: 8px;
    text-align: center;
    line-height: 25px;
  } */ 

</style>
